<template>
  <el-dialog
    class="z-dialog"
    :visible="visible"
    ref="dialog"
    :close-on-click-modal="false"
    :before-close="handleCancel"
    v-bind="$attrs"
  >
    <slot></slot>
    <template #title>
      <slot name="title"></slot>
    </template>
    <template #footer>
      <slot name="footer">
        <div class="dialog-footer">
          <el-button type="primary" @click="handelOk" v-if="!disabled"
            >提 交
          </el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    zVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    // 给调用的组件初始化数据 再 关闭
    handleCancel() {
      this.$emit("cancel", () => {
        this.zVisible = false;
      });
    },
    handelOk() {
      this.$emit("ok", (message) => {
        this.$message.success(message);
        this.handleCancel();
      });
    },
  },
};
</script>

<style scoped lang="less">
.z-dialog {
  /deep/ .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      background: @theme;
      padding: 12px 20px;
      border-radius: 10px 10px 0 0;
      .el-dialog__title {
        width: 100%;
        text-align: center;
        display: block;
        color: #fff;
        line-height: 24px;
      }
      .el-dialog__headerbtn {
        top: 16px;
        .el-icon-close {
          color: #fff;
        }
      }
    }
    .el-dialog__footer {
      padding: 14px 20px;
      background: #f1f5ff;
      border-radius: 0 0 10px 10px;
      display: flex;
      justify-content: center;
    }
    .el-dialog__body {
      padding: 20px;
    }
  }
}
</style>
